﻿<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>日期组件测试</title>
    <link href="css/zCalendar.css" rel="stylesheet">
</head>

<body class="mui-ios mui-ios-11 mui-ios-11-0">
    <div id="app">
        <z-calendar ref="zCalendar" :year="zCalendar.year" :month="zCalendar.month" :data-array="zCalendar.dataArray"
            :init-month=1 :is-default-fill="false" :is-multi-select="false" :is-hotel-select="true"
            :is-small-price="true" :is-clear-choose-data="false" :on-finish="onFinish" :on-hotel-end="onHotelEnd" :on-click="onClick"
            :on-click-all="onClickAll" :on-delete="onDelete" @date-change="dateChange" @data-change="dataChange">
        </z-calendar>
    </div>

    <script src="js/vue.min.js"></script>
    <script src="js/zCalendar.js"></script>
    <script>
        ////获取所有选中的日期
        //console.log(vm.$refs.zCalendar.getChoseData());
        var vm = new Vue({
            el: "#app",
            data: {
                zCalendar: {
                    dataArray: [],
                    year: 2019,
                    month: 8
                }
            },
            methods: {
                onFinish: function (date) { },
                onHotelEnd: function (items, startTime, endTime) {

                    console.log("onHotelEnd:" + startTime.date + " _ " + endTime.date);
                },
                onClick: function (item) {
                    console.log("onClick:" + item.date);
                    //alert(vm.$refs.zCalendar.getChoseData().dateJoin);
                },
                onDelete: function (item) {
                    console.log("onDelete:" + item.date);
                    //alert(vm.$refs.zCalendar.getChoseData().dateJoin);
                },
                onClickAll: function (item) {
                    console.log("onClickAll:" + item);
                },
                preMonth: function (value) {
                    this.zCalendar.month = value;
                },
                dataChange: function (dataArray) { //数据更改回传事件
                    this.zCalendar.dataArray = dataArray;
                },
                dateChange: function (yaer, month) { //日期更改回传事件
                    this.zCalendar.yaer = yaer;
                    this.zCalendar.month = month;
                }
            },
            created: function () {
                setTimeout(function () {
                    vm.$set(vm.$data.zCalendar, "dataArray", [
                        { "date": "2019-8-29", "price": 888.00 },
                        { "date": "2019-8-21", "price": 555.00 },
                        { "date": "2019-8-15", "price": 123.00 },
                        { "date": "2019-8-28", "price": 555.00 },
                        { "date": "2019-8-12", "price": 888.00 },
                        { "date": "2019-8-16", "price": 888.00 },
                        { "date": "2019-8-17", "price": 888.00 },
                        { "date": "2019-8-18", "price": 888.00 },
                        { "date": "2019-8-31", "price": 666.00 },
                        { "date": "2019-8-5", "price": 666.00 },
                        { "date": "2019-8-14", "price": 123.00 },
                        { "date": "2019-8-13", "price": 123.00 }
                    ])
                }, 1000);
            }
        });
    </script>
    <script>
    </script>
</body>

</html>